<template>
  <TmDrawer
    v-model:show="drawerShow"
    :z-index="999"
    in-content
    hide-header
    disabble-scroll
    :foot-height="112"
    :height="334"
  >
    <!-- 主体内容 -->
    <template>
      <scroll-view
        scroll-x
        :enable-flex="true"
        scroll-with-animation
        scroll-anchoring
        :enhanced="true"
        :show-scrollbar="false"
        class="hb-w-full"
      >
        <view class="hb-h-29 hb-flex">
          <template v-for="(item, index) in getButtons" :key="index">
            <view
              class="hb-flex hb-items-center hb-justify-center hb-flex-col hb-flex-shrink-0 hb-w-21 hb-h-full hb-relative"
              :class="[getButtons.length <= 4 && 'hb-flex-1']"
              @click="handleButtonClick(item)"
            >
              <button
                v-if="item.type === CustomShareTypeEnum.SHARE"
                open-type="share"
                :id="WxShareButtonIdEnum.CustomShare"
                class="hb-w-full hb-h-full hb-absolute hb-top-0 hb-left-0 hb-opacity-0 hb-z-10"
              ></button>
              <TmImage :src="item.icon" :width="88" :height="88"></TmImage>
              <TmText class="hb-mt-2" :label="item.text" :font-size="24" />
            </view>
          </template>
        </view>
      </scroll-view>
      <!-- 复制链接弹窗 -->
      <TmOverlay v-model:show="shortLinkShow" :z-index="999" contentAnimation>
        <view class="hb-w-screen hb-h-screen hb-mt-30">
          <TImage
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/share-guide-icon2.png"
            width="444rpx"
            height="316rpx"
          />
        </view>
      </TmOverlay>
    </template>
    <template #foot>
      <view class="hb-w-full hb-h-2 hb-bg-[#f7f8fa]"></view>
      <TmButton
        :height="96"
        :margin="[0, 0]"
        :padding="[0, 0]"
        :follow-theme="false"
        color="#fff"
        label="取消"
        block
        :font-size="32"
        @click="drawerShow = false"
      />
    </template>
  </TmDrawer>

  <!-- 微信分享预览 -->
  <!-- <TmOverlay v-model:show="sharePreviewShow" :z-index="999" :overlay-click="false" contentAnimation>
    <WxshareSwiper />
  </TmOverlay> -->
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import { CustomShareTypeEnum, ShareBtnItem, WxShareOptions } from './types';
  import { Toast } from '@/utils';
  import { useSaveFile } from '@/hooks/file/useSaveFile';
  import { WxShareButtonIdEnum } from '@/enums/PublicEnum';
  // import WxshareSwiper from './components/WxshareSwiper.vue';

  // 定义props
  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    isCustomWxShareCallback: propTypes.bool.def(false),
    /** 微信分享配置 */
    wxShareOptions: {
      type: Object as PropType<WxShareOptions>,
      default: () => ({}),
    },
    /** 二维码链接 */
    codeUrl: propTypes.string.def(''),
    /** 复制链接 */
    showCopyLink: propTypes.bool.def(false),
  });

  // 定义emits
  const emit = defineEmits(['update:modelValue']);

  const drawerShow = computed({
    get() {
      return props.modelValue;
    },
    set(value) {
      emit('update:modelValue', value);
    },
  });

  const getButtons = computed(() => {
    const list: ShareBtnItem[] = [];
    if (props.wxShareOptions || props.isCustomWxShareCallback) {
      list.push({
        icon: `https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/wechat-share-icon.png`,
        text: '微信好友',
        type: CustomShareTypeEnum.SHARE,
      });
    }
    if (props.codeUrl) {
      list.push({
        icon: `https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/download-code.png`,
        text: '下载二维码',
        type: CustomShareTypeEnum.DOWNLOAD_MINIPROGRAM_CODE,
      });
    }
    if (props.showCopyLink) {
      list.push({
        icon: `https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/copyUrl-share-icon.png`,
        text: '复制链接',
        type: CustomShareTypeEnum.COPY_LINK,
      });
    }
    return list;
  });

  const shortLinkShow = ref(false);
  const handleButtonClick = (item: ShareBtnItem) => {
    console.log(item);
    switch (item.type) {
      case CustomShareTypeEnum.SHARE:
        break;
      case CustomShareTypeEnum.COPY_LINK:
        shortLinkShow.value = true;
        break;
      case CustomShareTypeEnum.DOWNLOAD_MINIPROGRAM_CODE:
        if (props.codeUrl) {
          useSaveFile()
            .downloadFile(props.codeUrl)
            .then((path) => {
              uni.showShareImageMenu({
                path,
              });
            });
        } else {
          Toast('二维码不存在');
        }
        break;
    }
  };

  if (!props.isCustomWxShareCallback) {
    onShareAppMessage(() => {
      return props.wxShareOptions;
    });
  }
</script>
